<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="icon" type="image/x-icon" href="./images/icon/hyw.png"/>
	
			
		<title>Mr_Houyw</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body,html{
				width: 100%;
				height: 100%;
				background: url(images/bg/star_sky_3.jpg) no-repeat;
				background-size: cover;
			
			}
	
			#screen{
				width:300px;
				height: 300px;
				margin: 0 auto;
				position: relative;
				perspective: 500px;
				top: 50%;
				margin-top: -150px;
				backface-visibility: hidden;
				perspective-origin: 100% 100%;
		
			}
			#screen ul{
				list-style: none;
				width: 100px;
				height: 100px;
				transform-style: preserve-3d;
				position: relative;
				transition-duration: 2s;
				/* background: red; */
				/* backface-visibility: hidden; */
				transform-origin: 150px 150px;
				
			}
			#screen ul li{
				width: 100px;
				height: 100px;
				background: #9391B8;
				border: 1px solid black;
				position: absolute;
				color: black;
				text-align: center;
				line-height: 100px;
				opacity: 0.7;
				border-radius: 5px;
				
				

			}
			#screen ul li:first-of-type{
				left: 150px;
				margin-left: -50px;
				top: 100px;
		
				
			}
				
			#screen ul li:nth-of-type(2){
				left: 150px;
				margin-left: -50px;
				top: 0;
				transform-origin: bottom;
				transform: rotateX(90deg);
			}
			#screen ul li:nth-of-type(3){
				left: 150px;
				margin-left: 50px;
				top: 100px;
				transform-origin: left;
				transform: rotateY(90deg);
			}
			#screen ul li:nth-of-type(4){
				left: 150px;
				margin-left: -150px;
				top: 100px;
				transform-origin: right;
				transform: rotateY(-90deg);
			}
			#screen ul li:nth-of-type(5){
				left: 150px;
				margin-left: -50px;
				top: 200px;
				transform-origin: top;
				transform: rotateX(-90deg);
			}
			#screen ul li:nth-of-type(6){
				left: 150px;
				margin-left: -50px;
				top: 100px;
				transform: translateZ(-100px);
			}
			/* #screen:hover ul{
				transform: rotateX(90deg)
			} */
			#up,#down,#lf,#rg{
				position: absolute;
				width: 30px;
				height: 30px;
				/* background: red; */
				text-align: center;
				line-height: 50px;
				/* border: 1px solid black; */
				cursor: pointer;
			}
			#up,#down{
				width:200px;
				height: 50px;
			}
			#lf,#rg{
				width: 50px;
				height: 200px;
				line-height: 200px;
			}
			#up{
			/* height: 300; */
				top:0px;
				left:50px;
				
			}
			#down{
				bottom:0;
				left:50px
			}
			#lf{
				left: 0;
				top: 50px;
			}
			#rg{
				top: 50px;
				right: 0;
			}
			#banner{
				width: 100%;
				height: 50px;
				background: #2A2671;
				opacity: 0.7;
			}
		</style>
	</head>
	<body>
		<div id="banner">
			
		</div>
	
			<div id="screen">
				<div id="up" >
					👆
				</div>
				<div id="lf">
					👈
				</div>
				<ul>
					<li down='1'> <a href="http://mr_houyw.gitee.io/" target="_blank">BLOG</a></li>
					<li down='2'> <a href="http://mr_houyw.gitee.io/pages/poem/index.html">POEM</a></li>
					<li down='3'> <a>3</a></li>
					<li down='4'> <a>4</a></li>
					<li down='5'> <a>5</a></li>
					<li down='6'> <a>6</a></li>
				
				</ul>
				<div id="rg">
					👉
				</div>
				<div id="down">
					👇
				</div>
			</div>
	</body>
	<script type="text/javascript">
		var up=document.querySelector("#up");
		var down=document.querySelector("#down");
		var ul=document.querySelector("#screen>ul");
		var lf=document.querySelector("#lf");
		var rg=document.querySelector("#rg");
		console.log(ul);
		var d =0;
		up.onclick=function(ev){
			d += 90;
			ul.style.transform='rotateX('+d+'deg)'
		}
		down.onclick=function(ev){
			d -= 90;
			ul.style.transform='rotateX('+d+'deg)'
		}
		lf.onclick=function(ev){
			d += 90;
			ul.style.transform='rotateY('+d+'deg)'
		}
		rg.onclick=function(ev){
			d -= 90;
			ul.style.transform='rotateY('+d+'deg)'
		}
	</script>
</html>